<template>
  <div class="footer gl_cen" v-show="showFooter">
      <div class="item" v-for="it in navs" :key="it.text" @click="switchNav(it)">
        <van-icon :name="it.icon" :size="25" class="icon" :color="issel(it.sel)"></van-icon>
        <span :style={color:issel(it.sel)}>{{it.text}}</span>
      </div>
  </div>
</template>

<script>
import { computed, defineComponent, toRefs } from "@vue/runtime-core";
import { setup } from "vue-class-component";
import {ref} from 'vue'
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
name:'Footer',
components:{
},
setup(){
    const store=useStore()
    const router=useRouter()
    const {showFooter} =toRefs(store.state)
    const navs=ref([
      {
        text:'首页',
        icon:'wap-home',
        link:'/',
        sel:true
      },
      {
        text:'我的',
        icon:'manager',
        link:'/person',
        sel:false
      }
    ])
    var issel=computed(()=>{
      return parm=>{
         return parm?'#0af':'#999'
      }
    })
    let switchNav=(it)=>{
      navs.value.map(nav=>{
        if(nav.text===it.text){
          // 当前选中
          nav.sel=true
        }else{
          nav.sel=false
        }
        router.push(it.link);
      })
    }
    return {
        navs,
        issel,
        switchNav,
        showFooter
    }
}
})
   
</script>

<style lang="scss" scoped>
  .footer{
    width:100%;
    height: auto;
    background: #fff;
    border-top: 2px solid #ccc;
    padding: 10px 0 5px;
    position: fixed;
    bottom: 0;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
    .item{
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction: column;
      cursor: pointer;
      .icon{
        display: block;
        text-align: center;
      }
      span{
        text-align: center;
      }
    }
  }
</style>